<!--
 * @Author: xiaopang
 * @Date: 2025-10-16 11:28:32
 * @LastEditTime: 2025-10-24 17:07:46
 * @LastEditors: xiaopang
-->
<template>
  <div class="min-h-screen bg-#F8F8F8">
    <!-- 顶部标题栏 -->
    <div class="px-10px pb-16px mb-15px bg-white">
      <div class="h-42px flex items-center justify-between">
        <div class="text-16px font-bold">商家名称，您好</div>

        <div class="flex items-center gap-8px">
          <img src="@/assets/scan.png" class="w-18px h-18px" />
          <div class="text-14px font-bold">核销</div>
        </div>
      </div>

      <!-- 统计卡片区域 -->
      <div class="grid grid-cols-2 gap-x-15px gap-y-12px">
        <!-- 订单数量 -->
        <div class="p-10px h-85px bg-gradient-to-br from-#507BFF to-#44B2FE rounded-4px">
          <div class="flex items-center h-24px gap-6px mb-10px">
            <img src="@/assets/home1-icon.png" class="w-24px h-24px" />
            <div class="text-10px text-white">订单数量（笔）</div>
          </div>
          <div class="text-16px font-600 text-white text-center">{{ statistics.orderCount }}</div>
        </div>

        <!-- 已核销消费券数量 -->
        <div class="p-10px h-85px bg-gradient-to-br from-#22A68D to-#3EC0A7 rounded-4px">
          <div class="flex items-center h-24px gap-6px mb-10px">
            <img src="@/assets/home2-icon.png" class="w-24px h-24px" />
            <div class="text-10px text-white">已核销消费券数量（张）</div>
          </div>
          <div class="text-16px font-600 text-white text-center">{{ statistics.writeOffCount }}</div>
        </div>

        <!-- 订单金额 -->
        <div class="p-10px h-85px bg-gradient-to-br from-#FEB122 to-#FECA45 rounded-4px">
          <div class="flex items-center h-24px gap-6px mb-10px">
            <img src="@/assets/home3-icon.png" class="w-24px h-24px" />
            <div class="text-10px text-white">订单金额（元）</div>
          </div>
          <div class="text-16px font-600 text-white text-center">{{ statistics.orderAmount }}</div>
        </div>

        <!-- 已核销消费券金额 -->
        <div class="p-10px h-85px bg-gradient-to-br from-#FC5462 to-#FE8D9B rounded-4px">
          <div class="flex items-center h-24px gap-6px mb-10px">
            <img src="@/assets/home4-icon.png" class="w-24px h-24px" />
            <div class="text-10px text-white">已核销消费券金额（元）</div>
          </div>
          <div class="text-16px font-600 text-white text-center">{{ statistics.writeOffAmount }}</div>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="bg-white">
      <div class="px-15px py-20px">
        <!-- 订单号 -->
        <div class="flex items-center h-32px mb-10px">
          <div class="text-14px text-#333 font-bold w-70px flex-shrink-0">订单号：</div>
          <div class="flex-1 h-32px bg-#F8F8F8 rounded-2px border border-1px border-#F3F3F3">
            <input type="text" v-model="searchForm.orderNo" placeholder="请输入订单编号" class="w-full h-full px-10px text-12px text-#333" />
          </div>
        </div>

        <!-- 核销时间 -->
        <div class="flex items-center h-32px mb-10px">
          <div class="text-14px text-#333 font-bold w-70px flex-shrink-0">核销时间：</div>
          <div class="flex-1 h-32px flex items-center pr-15px bg-#F8F8F8 rounded-2px border border-1px border-#F3F3F3">
            <input type="text" v-model="dateRangeText" readonly placeholder="请选择日期范围" @click="showCalendar = true" class="flex-1 h-full px-10px text-12px text-#333" />
            <img src="@/assets/calendar.png" class="w-14px h-14px" />
          </div>
        </div>

        <!-- 查询按钮 -->
        <div class="flex justify-end">
          <div class="w-60px h-24px bg-#FC6C53 rounded-2px text-14px text-#fff text-center leading-24px">查询</div>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="w-full text-14px">
          <thead class="bg-#F7F8FA">
            <tr>
              <th class="px-12px py-12px text-left min-w-50px"></th>
              <th class="px-12px py-12px text-left text-#000000 font-500 min-w-120px">消费券码</th>
              <th class="px-12px py-12px text-left text-#000000 font-500 min-w-120px">订单号</th>
              <th class="px-12px py-12px text-left text-#000000 font-500 min-w-100px">核销日期</th>
              <th class="px-12px py-12px text-left text-#000000 font-500 min-w-100px">核销金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in recordList" :key="index" class="border-t border-#EBEDF0">
              <td class="px-12px py-12px text-#323233">{{ index + 1 }}</td>
              <td class="px-12px py-12px text-#323233">{{ item.couponCode }}</td>
              <td class="px-12px py-12px text-#323233">{{ item.orderNo }}</td>
              <td class="px-12px py-12px text-#323233">{{ item.writeOffDate }}</td>
              <td class="px-12px py-12px text-#323233">{{ item.amount }}</td>
            </tr>
            <tr v-if="recordList.length === 0">
              <td colspan="5" class="px-12px py-32px text-center text-#969799">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 日期选择器 -->
    <van-calendar v-model:show="showCalendar" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onDateConfirm" :allow-same-day="true" confirm-text="确定" confirm-disabled-text="请选择结束日期" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const router = useRouter();

// 统计数据
const statistics = ref({
  orderCount: 10,
  writeOffCount: 10,
  orderAmount: '2375.00',
  writeOffAmount: '350.00'
});

// 搜索表单
const searchForm = ref({
  orderNo: '',
  startDate: '',
  endDate: ''
});

// 日期选择器
const showCalendar = ref(false);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);

// 日期范围文本
const dateRangeText = computed(() => {
  if (searchForm.value.startDate && searchForm.value.endDate) {
    return `${searchForm.value.startDate} 00:00-${searchForm.value.endDate} 24:00`;
  }
  return '';
});

// 核销记录列表
const recordList = ref([
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '84.00'
  },
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '178.00'
  },
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '217.00'
  },
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '84.00'
  },
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '178.00'
  },
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '217.00'
  },
  {
    couponCode: '010603772056',
    orderNo: '010603772056',
    writeOffDate: '2025.10.16',
    amount: '179.00'
  }
]);

// 日期确认
const onDateConfirm = values => {
  const [start, end] = values;
  searchForm.value.startDate = formatDate(start);
  searchForm.value.endDate = formatDate(end);
  showCalendar.value = false;
};

// 格式化日期
const formatDate = date => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 跳转到核销页面
const goToWriteOff = () => {
  router.push('/write-off');
};

// 查询
const handleSearch = () => {
  showToast('查询功能待实现');
  // TODO: 调用接口查询数据
};

// 初始化默认日期范围（当天）
const initDefaultDate = () => {
  const today = new Date();
  searchForm.value.startDate = formatDate(today);
  searchForm.value.endDate = formatDate(today);
};

// 组件挂载时初始化
initDefaultDate();
</script>

<style scoped>
table {
  border-collapse: collapse;
}
input {
  outline: none;
  border: none;
  background: transparent;
}
</style>
